<template>
  <div class="flex gap-4 mb-4">
    <span><b>预约搜索： </b></span>
    <el-input
      v-model="input2"
      style="width: 240px"
      placeholder="输入预约信息"
      :prefix-icon="Search"
      @input="$emit('output',input2)"
    /> 
    <div class="spacer"></div>
    
  </div>



<el-button type="primary"  @click="dialogFormVisible = true">
  添加预约信息
</el-button>

 <el-dialog v-model="dialogFormVisible" title="添加预约信息" width="500">
  <el-form :model="form" label-width="100px">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="预约ID">
          <el-input v-model="form.bookID" autocomplete="off" @input = "checkForm"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="预约的用户">
          <el-input v-model="form.bookUser" autocomplete="off" @input = "checkForm" />
        </el-form-item>
      </el-col>
        
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="场地">
          <el-input v-model="form.field" autocomplete="off" @input = "checkForm"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="时间">
          <el-time-select
    v-model="form.time" @input = "checkForm"
    style="width: 240px"
    start="00:00"
    step="01:00"
    end="23:00"
    placeholder="Select time"
  />
        </el-form-item>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="24">
        <el-form-item>
          <el-button  @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm"  :disabled="flag">添加</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</el-dialog>

</template>

<script lang="ts" setup>
import axios from 'axios'
import { ref } from 'vue'
const value = ref('')
import { Calendar, Search } from '@element-plus/icons-vue'
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const input4 = ref('')
const deleteSelected = ref(false)
import { reactive} from 'vue'
const flag = ref(true);
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  bookID: '',
  bookUser: '',
  field: '',
  time: '',

})

import {  } from 'vue'
function checkForm(){
  if(form.bookID && form.bookUser && form.field){
      flag.value = false;
  }else{
    flag.value = true;
  }
}

const value1 = ref('')
const value2 = ref('')
const textarea = ref('')
const shortcuts = [
{
  text: 'Today',
  value: new Date(),
},
{
  text: 'Yesterday',
  value: () => {
    const date = new Date()
    date.setTime(date.getTime() - 3600 * 1000 * 24)
    return date
  },
},
{
  text: 'A week ago',
  value: () => {
    const date = new Date()
    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
    return date
  },
},
]

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}

  function submitForm(){
    const userData = {
      bookID: form.bookID,
      bookUser: form.bookUser,
      field: form.field,
      time: form.time,
            }
            console.log(userData.data);
            axios.post('http://localhost:9001/Book/addBook',userData).then(response =>{
                if(response.data){
                    alert("添加成功")
                    this.$router.push('/')
                }else{
                    alert("添加失败，预约已存在")
                }})
                dialogFormVisible.value = false;
  }


</script>


<style scoped>
.spacer {
  margin: 16px 0; /* 控制空行的高度，16px 可以根据需要调整 */
}

.demo-date-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}

.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
}

.demo-date-picker .block:last-child {
border-right: none;
}

.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
</style>
